<template>
<div class="main">
  <div class="div-item" >
    <div class="head">{{ pageData[0].CgPlanName}}</div>
    <div class="div-date">发布日期:&nbsp;{{formatDate(pageData[0].PublishTime)}}</div>
  </div>
    <div class="div-item" >
    <div class="div-name"><span></span>中标单位</div>
    <div class="content" v-html="pageData[0].ProviderNameList"></div>
  </div>
   <div class="div-item" >
    <div class="div-name"><span></span>招标经办人</div>
    <div class="content">
    <div>招标经办人:&nbsp;{{ pageData[0].Jbr}}</div>
        <div>招标经办人电话:&nbsp;{{ pageData[0].JbrTel}}</div>
    </div>
  </div>
   <div class="div-item" >
    <div class="div-name"><span></span>投诉渠道</div>
        <div class="content">
<div>投诉渠道:&nbsp;{{ pageData[0].ComplainChannel}}</div>
        <div>投诉电话:&nbsp;{{ pageData[0].ComplainTel}}</div>
        </div>
  </div>
   <div class="div-item" >
    <div class="div-name"><span></span>备注</div>
    <div class="content">{{ pageData[0].Remark}}</div>
  </div>
    <a class="button button-red"
       @click="suggest">
     <icon type="warn"></icon>我要投诉</a>
</div>
</template>

<script>
import { Search, Tab, TabItem, Group, Cell, XButton, dateFormat, Icon } from 'vux'
import {ZBPublishService} from '../../service/Services.js'

export default {
  name: 'CellBtn',
  components: {
    Search,
    Tab,
    TabItem,
    Group,
    Cell,
    XButton,
    Icon
  },
  data () {
    return {
      pageData: []
    }
  },
  methods: {
    loadData () {
      this.$vux.loading.show({
        text: '加载中...'
      })
      ZBPublishService.getZBPublishDetail(this.$route.query.PublicMsgGUID).then((res) => {
        this.$vux.loading.hide()
        this.pageData = res.Data
      }).catch((res) => {
        this.$vux.toast.show({
          text: '请求失败,请联系管理员',
          type: 'cancel',
          width: '180px'
        })
      })
    },
    formatDate (myDate) {
      var msec = myDate.match(/\d+[+]\d+/gi)
      return dateFormat(new Date(Number.parseInt(msec)), 'YYYY-MM-DD')
    },
    suggest () {
      this.$router.push({ path: '/demos/my-suggest-form' })
    }
  },
  mounted () {
    this.loadData()
  }
}
</script>

<style scoped lang='less'>
.main{
 word-wrap: break-word;
   font-family: PingFangSC-Regular;
}
.head{
  padding-top: 20px;
  font-weight: bold;
  margin:5px 20px;
  font-size: 19px;
  color: #111111;
}
.content{
  margin:10px 20px 10px 20px ;
  font-size: 14px;
  color: #7F7F7F;
  letter-spacing: 0;
  line-height: 30px;
      border-top: 1px solid #E5E5E5;
    padding-top: 10px;
        padding-bottom: 10px;
}

.div-date{
  margin-left: 20px;
  font-size: 14px;
  color: #7F7F7F;
  padding-bottom: 10px;
}

.div-name{
      margin-left: 20px;
      margin-bottom: 10px;
    font-size: 16px;
     font-weight: bold;
         padding-top: 10px;
}

.div-name span{
  display: inline-block;
  height: 25px;
  width:4px;
  background: #DC220B;
      position: relative;
    top: 6px;
    margin-right: 10px;
}

.div-item{
  margin-bottom: 10px;
      background: white;
}

.button {
  margin-top: 20px;
  font-size: 17px;
  height: 50px;
  line-height: 50px; // padding: 0 12px;
  display: inline-block;
  width: 100%;
  text-align: center;
}

.button-red {
  color: white;
  background-color: red;
}

.weui-icon-warn {
    color: #fff;
}
</style>
